// 字体大小
$base-font-size: 0.2rem;
$font-sizes: (
  xxs: 0.1,
  // 8px
  xs: 0.125,
  // 10px
  sm: 0.2875,
  // 12px
  md: 0.1625,
  // 13px
  lg: 0.175,
  // 14px
  xl: 0.2,
  // 16px
  xxl: 0.225,
  // 18px
  xxxl: 0.25 // 20px,,,,
);

// 宽高
.w-100 {
  width: 100%;
}
.h-100 {
  height: 100%;
}

// flex
.d-flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}

$flex-jc: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
  evenly: space-evenly
);
$flex-ai: (
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch
);
.flex-1 {
  flex: 1;
}

// .mt-1 => margin top
// spacing
$spacing-types: (
  m: margin,
  p: padding
);
$spacing-directions: (
  t: top,
  r: right,
  b: bottom,
  l: left
);
$spacing-base-size: 0.5rem;
$spacing-sizes: (
  0: 0,
  1: 0.5,
  2: 1,
  3: 1.5,
  4: 2,
  5: 2.5
);

// 对齐
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var !important;
  }
}

// flex
@each $key, $value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
}

@each $key, $value in $flex-ai {
  .ai-#{$key} {
    align-items: $value;
  }
}

// 字体
@each $fontkey, $fontvalue in $font-sizes {
  .fs-#{$fontkey} {
    font-size: $fontvalue * $base-font-size;
  }
}

@each $typekey, $type in $spacing-types {
  // .m-1
  @each $sizekey, $size in $spacing-sizes {
    .#{$typekey}-#{$sizekey} {
      #{$type}: $size * $spacing-base-size;
    }
  }

  // .mx-1
  @each $sizekey, $size in $spacing-sizes {
    .#{$typekey}x-#{$sizekey} {
      #{$type}-left: $size * $spacing-base-size;
      #{$type}-right: $size * $spacing-base-size;
    }

    .#{$typekey}y-#{$sizekey} {
      #{$type}-top: $size * $spacing-base-size;
      #{$type}-bottom: $size * $spacing-base-size;
    }
  }

  // .mt-1
  @each $directionkey, $direction in $spacing-directions {
    @each $sizekey, $size in $spacing-sizes {
      .#{$typekey}#{$directionkey}-#{$sizekey} {
        #{$type}-#{$direction}: $size * $spacing-base-size;
      }
    }
  }

  .#{$typekey} {
    #{$type}: 0;
  }
}
